<template>
  <div>
    CloudRadio:
    <br />
    <CloudRadioGroup v-model="value5" @change="onChange5">
      <CloudRadio :style="radioStyle" :value="1"> Option A </CloudRadio>
      <CloudRadio :style="radioStyle" :value="2"> Option B </CloudRadio>
      <CloudRadio :style="radioStyle" :value="3"> Option C </CloudRadio>
    </CloudRadioGroup>
    <br />
    <div style="margin-top: 20px">
      list配置：
      <br />
      <CloudRadioGroup
        :list="list"
        v-model="value"
        @change="onChange"
      ></CloudRadioGroup>
      <br />
      <CloudRadioGroup
        :list="list0"
        titleKey="text"
        valueKey="id"
        v-model="value0"
        @change="onChange"
      ></CloudRadioGroup>
      <br />
    </div>
    <div style="margin-top: 20px">
      options配置：
      <br />
      <CloudRadioGroup
        :options="plainOptions"
        :default-value="value1"
        @change="onChange1"
      />
      <br />
      <CloudRadioGroup
        v-model="value2"
        :options="options"
        @change="onChange2"
      />
      <br />
      <CloudRadioGroup
        v-model="value3"
        :options="optionsWithDisabled"
        disabled
        @change="onChange3"
      />
    </div>
  </div>
</template>

<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: false },
];
export default {
  title: '4.RadioGroup 组合 - 配置方式 ',
  subTitle: '通过配置 list/options 参数来渲染单选框。',
  data() {
    return {
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      list: [{
        title: 'A',
        value: 0
      }, {
        title: 'B',
        value: 1
      }, {
        title: 'C',
        value: 2
      }, {
        title: 'D',
        value: 3
      }],
      list0: [{
        text: 'A',
        id: 0
      }, {
        text: 'B',
        id: 1
      }, {
        text: 'C',
        id: 2
      }, {
        text: 'D',
        id: 3
      }],
      value: 0,
      value0: 0,
      value1: 'Apple',
      value2: 'Apple',
      value3: 'Apple',
      value5: 1,
      plainOptions,
      options,
      optionsWithDisabled,
    }
  },
  methods: {
    onChange(value) {
      console.log('this.value', this.value);
      console.log('radio checked', value);
    },
    onChange1(value) {
      console.log('radio1 checked', value);
    },
    onChange2(value) {
      console.log('this.value2', this.value2);
      console.log('radio2 checked', value);
    },
    onChange3(value) {
      console.log('this.value3', this.value3);
      console.log('radio3 checked', value);
    },
    onChange5(value) {
      console.log('this.value35', this.value5);
      console.log('radio3 checked', value);
    },
  }
}
</script>

<style lang="scss">
</style>